<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ol class="classArea"></ol>
    <script>
        let classes = [{
            "name": "计算机一班",
            "students": [{
                "id": 8526,
                "name": "秋香",
                "gender": "女"
            }, {
                "id": 9527,
                "name": "华安",
                "gender": "男"
            }]
        }, {
            "name": "计算机二班",
            "students": [{
                "id": 6666,
                "name": "华文",
                "gender": "男"
            }, {
                "id": 8888,
                "name": "华武",
                "gender": "男"
            }]
        }];
        let classArea = document.querySelector('.classArea');
        classes.forEach(classElement => {
            let li = document.createElement('li');
            li.innerHTML = classElement.name;
            classArea.appendChild(li);
            let ol = document.createElement('ol');
            ol.style.listStyleType = "lower-roman"
            classElement.students.forEach(studentInfo => {
                let stuLi = document.createElement('li');
                stuLi.innerHTML = studentInfo.id + ' , ' + studentInfo.name + ' , ' + studentInfo.gender;
                ol.appendChild(stuLi);
            })
            li.appendChild(ol);
        })
    </script>
</body>

</html>